<template>
    <div>
        <div class="w-full! md:hidden!">
            <Swiper :list="_list" height="auto" :type="type" :showBtn="showBtn" :defaultAction="defaultAction">
                <template #default="{ data, index }">
                    <slot :data="data" :index="index">
                        <div v-if="type === '2'">
                            <img :src="value.fileList?.[0]" class="w-[100%] h-[auto]" v-img-auto
                                v-for="(value, index) in data" :key="index" />
                        </div>
                        <div v-else>
                            <imgs :imgAuto="imgAuto" :list="data" :title="title" :content="content" />
                        </div>
                    </slot>
                </template>
            </Swiper>
        </div>
        <div class="hidden! md:block! max-w-[1200px]! mx-auto! text-center!">
            <imgs :num="4" :list="list" :title="title" :content="content" />
            <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!" :href="btnUrl"
                target="_blank" v-if="btnText">
                {{ btnText }}
            </v-btn>
        </div>
    </div>
</template>

<script setup lang="ts">
import imgs from './imgs.vue'
import { Swiper } from '../swiper';
// 引入 img-vuer，安装插件
const isShow = ref(false)
const props = defineProps({
    list: {
        type: Array as () => string[],
        default: () => []
    },
    type: {
        type: String as () => '1' | '2',
        default: '1'
    },
    showBtn: {
        type: Boolean,
        default: true
    },
    defaultAction: {
        type: Boolean,
        default: false
    },
    imgAuto: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: ''
    },
    content: {
        type: String,
        default: ''
    },
    btnText: {
        type: String,
        default: ''
    },
    btnUrl: {
        type: String,
        default: ''
    },
})
const _list = ref(splitIntoPairs(props.list ?? [], 2))
console.log('_list_list_list', _list.value)
nextTick(() => {
    console.log('showBtn 的值是:', props.showBtn);
    isShow.value = true
})
</script>